<script>
export default {
  data(){
    return{
      counter: 0,
      msg: 'helloWorld',
      checked: 'true',
      fruits:[],
      sex: '男',
      city: '深圳',
      citys:[]
    } 
  },
  methods:{
    changeValue:function(e){
      console.log("123");
      this.msg = e.target.value;
    }
  }
}

</script>

<template>
  <div>
    <!-- v-model的基本使用 -->
    <input type="text" v-model="msg">
    <h2>{{msg}}</h2>

    <!-- 以下的操作，也能实现双向绑定 -->
    <!-- 本质是两个操作 -->
    <!-- 1. v-bind绑定一个value属性 -->
    <!-- 2. v-on给当前元素添加一个input事件 -->
    <!-- <input type="text" v-bind:value="msg"> -->
    <input type="text" :value="msg" @input="changeValue">


    <!-- 复选框 -->
    <!-- 单个勾选框，v-model为布尔值 -->
    <br>
    <input type="checkbox" v-model="checked">嘿嘿
    <br>
    <label for="checkbox">{{ checked }}</label>

    <!-- 多个勾选框 -->
    <!-- 选中之后，会将value值赋值给变量 -->
    <br>
    <input type="checkbox" v-model="fruits" value="苹果">苹果
    <input type="checkbox" v-model="fruits" value="梨子">梨子
    <input type="checkbox" v-model="fruits" value="香蕉">香蕉
    <input type="checkbox" v-model="fruits" value="葡萄">葡萄
    <h2>喜欢的水果：{{fruits}}</h2>

    <!-- 单选框 -->
    <!-- 选中之后，会将value值赋值给sex变量 -->
    <div>Picked: {{ sex }}</div>
    <input type="radio" v-model="sex" value="男">男
    <input type="radio" v-model="sex" value="女">女

    <!-- 选项框 -->
    <!-- 单选 -->
    <div>Selected: {{ city }}</div>

    <select v-model="city">
      <option disabled value="">Please select one</option>
      <option value="深圳">深圳</option>
      <option value="长沙">长沙</option>
      <option value="西安">西安</option>
    </select>

    <!-- 多选 -->
    <!-- multiple -->
    <br>
    <div>Selected: {{ citys }}</div>

    <select v-model="citys" multiple>
      <option disabled value="">Please select one</option>
      <option value="深圳">深圳</option>
      <option value="长沙">长沙</option>
      <option value="西安">西安</option>
    </select>

    <!-- 修饰符的使用 -->
    <!-- lazy -->
    <!-- 场景1：希望输入完之后，才更改视图，减少资源消耗，不然每一次更改都改动了视图，消耗资源 -->
    <!-- 场景2：全部输入完之后，才更改视图。 -->
    <input type="text" v-model.lazy="msg">
  </div>

  

</template>

<style> 

</style>
